<template>
  <div class="upload-wrapper">
		<BreadCrumb />
		<el-upload
			action="#"
			accept=".json"
			:auto-upload="false"
			:show-file-list="false"
			:on-change="upload">
			<el-button type="primary">选择文件</el-button>
		</el-upload>
		<pre>
由于图片识别价格昂贵，目前系统只能上传json文件,
如果你的题库是图片，请自行整理为json格式后上传。
如果困难请<el-link
	type="primary" 
	:underline="false"
	href="/question/help"
	target="_blank">参考文档</el-link>。
		</pre>
		<section v-if="tableData.length" class="question-list">
			<el-button type="primary" style="margin-bottom: 20px;" @click="save">保存</el-button>
			<QuestionItem
				v-for="(item, index) in tableData"
				:key="index"
				:question="item" />
		</section>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { post } from '@/axios'
import { ElMessage } from 'element-plus'
import QuestionItem from '@@/question/item'
import BreadCrumb from '@@/menu/breadcrumb'
const tableData = ref([])
function upload(file) {
	if (file.raw.type !== 'application/json') {
		ElMessage.error('目前只支持json文件')
		return
	}
	post('/questions/preview', { file: file.raw }, content => {
		tableData.value = JSON.parse(content)
		console.dir(tableData.value)
	})
}
function save () {
	post('/questions/upload', { content: JSON.stringify(tableData.value) }, content => {
		tableData.value = []
	})
}
</script>

<style scoped lang="scss">
.upload-wrapper {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	>pre {
		margin-top: 10px;
		line-height: 2rem;
		font-family: '微软雅黑';
	}
	.question-list {
		
	}
}
</style>
